Vue.component('app', {
	template: `
		<div style="height:100%;">
			<app-console></app-console>
			<context-menu></context-menu>
		</div>
	`,
	data: function(){
		return {
			root: {
				name: 'empty',
				childNodes: [
				]
			},
			snapshot: {},

		};
	
	},

	computed: {

	},

	methods: {
		updateNodeDeltas: function(deltaUpdateMap){
			let self = this;
			let root = self.root;
			let snapshot = self.snapshot;
			let addedDeltas = deltaUpdateMap.added;
			let removedDeltas = deltaUpdateMap.removed;
			console.log('tree keys: ' + Object.keys(self.snapshot).length);
			console.log('delta keys: ' + Object.keys(deltaUpdateMap.snapshot).length);
			console.log(deltaUpdateMap);
			let deltaNodes = null == removedDeltas ? [] : removedDeltas.childNodes;
			for(let i = 0; i < deltaNodes.length; i++){
				let tmpNode = deltaNodes[i];
				let parentNode = null == snapshot[tmpNode.pid] ? root : snapshot[tmpNode.pid];
				let siblingNodes = parentNode.childNodes;
				let found = false;
				for(let j = 0; j < siblingNodes.length; j++){
					let siblingNode = siblingNodes[j];
					if(tmpNode.id == siblingNode.id){
						found = true;
						siblingNodes.splice(j, 1);
						siblingNodes.push(tmpNode);
						break;
					}
				}
				if(found){
					break;
				}
			}
			deltaNodes = null == addedDeltas ? [] : addedDeltas.childNodes;			
			for(let i = 0; i < deltaNodes.length; i++){
				let tmpNode = deltaNodes[i];
				let parentNode = null == snapshot[tmpNode.pid] ? root : snapshot[tmpNode.pid];
				parentNode.childNodes.push(tmpNode);
			}

		}

	},
	
	mounted: function(){
		console.log('app created....');
		let self = this;
		self.$bus.$on('update-tree', function(evtMsg){
			console.log('receive update root event....');
			self.root = evtMsg.data.root;
			self.snapshot = evtMsg.data.snapshot;

		});

		self.$bus.$on('delta-update-tree', function(evtMsg){
			console.log('receive delta update event....');
			self.updateNodeDeltas(evtMsg.data);

		});

	}

});